<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>电商大数据管理平台</title>
		<link rel="icon" href="icon.ico">
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="css/dashboard.css">
		<link rel="stylesheet" href="plugins/element-ui/theme-default/index.css" />
		<link rel="stylesheet" href="plugins/datatables/css/dataTables.bootstrap.min.css">
		<link rel="stylesheet" href="css/datatables.css">
		<!--[if lt IE 9]>
			<script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
		<style>
			.chart-table {
				position: absolute;
				bottom: 20px;
				right: 50px;
				margin-right: 50px;
				background: rgba(255, 255, 255, .9);
				font-size: 14px;
				text-align: center;
			}

			.zanwu {
				position: absolute;
				top: 50px;
				left: 100px;
				width: 500px;
				height: 380px;
				text-align: center;
				line-height: 380px;
				font-size: 30px;
				margin: 100px;
				color: #323232;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
						<a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></a>
					</div>
					<navbars :acv="bnav"></navbars>
				</div>
			</nav>

			<div class="container-fluid">
				<div class="row">
					<div class="col-sm-3 col-md-2 sidebar">
						<fxnav fx="5"></fxnav>
					</div>
					<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
						<h2 style="color: #0D81F5;"><b>店铺TOP10分析</b></h2>

						<div class="placeholders alert alert-info">
							<h4><img src="images/sx.png" style="margin-left: -24px;margin-top: -3px;">店铺TOP10汇总</h4>
							<button style="margin: 0 20px;" class="btn btn-primary pull-right" @click="dateChange2()">确认</button>
							<form role="form" class="form-inline pull-right">
								<div class="form-group">
									<label for="address">地址：</label>
									<select name="address" id="address" class="form-control" v-model="addressSelected" @change="getAllData()">
										<option value="" selected>铜仁地区</option>
										<option v-for="(add,index) in addressData" v-bind:value="index">
											{{ add.geoName }}
										</option>
									</select>
								</div>
								<div class="form-group">
									<div class="form-group">
										<label for="year">年：</label>
										<select v-model="years2" name="address" id="year" class="form-control">
											<option :value="yearss.years" v-for="yearss in ym">{{yearss.years}}年</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<div class="form-group">
										<label for="mouth">月：</label>
										<select v-model="days2" name="address" id="mouth" class="form-control">
											<option :value="'0'+n"  v-for="n in yearSelect(years2)" >{{n}}月</option>
										</select>
									</div>
								</div>
							</form>
						</div>

						<div style="position: relative;">
							<h3 style="padding: 10px 0;text-align: center;">店铺TOP10分析</h3>
							<div id="chart1" style="height:650px;"></div>
						</div>

						<el-table v-loading.body="loading" :data="otherPlatform.searchData" stripe border style="width: 100%;margin-bottom: 30px;">
							<el-table-column prop="storeName" label="店铺名称"></el-table-column>
							<el-table-column prop="addressCode" label="所属区县"></el-table-column>
							<el-table-column prop="businessVolume" label="销售数量（件）"></el-table-column>
							<el-table-column prop="tradingVolume" label="销售金额（元）"></el-table-column>
						</el-table>
						<div class="text-center" style="margin: 10px 0;">
							<el-pagination @current-change="handleCurrentChange" :current-page="otherPlatform.currentPage" :page-size="otherPlatform.pageSize" layout="total, prev, pager, next, jumper" :total="otherPlatform.totalCount">
							</el-pagination>
						</div>
					</div>

				</div>
			</div>
		</div>
		</div>

		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="plugins/echarts/echarts-all.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/common.js"></script>
		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="plugins/datatables/js/jquery.dataTables.min.js"></script>
		<script src="plugins/datatables/js/dataTables.bootstrap.min.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/nav.js"></script>
		<script src="plugins/element-ui/index.js"></script>
		<script src="js/common.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					bnav: {
						number: 2,
					},
					time: '1',
					shopData: [],
					labelData: [],
					seriesSum: [],
					seriesIncome: [],
					reverseData: [],
					addressSelected: "",
					addressData: [],
					years2: 2017,
					days2: '01',
					startime: "2017-01-11",
					endtime: getCurrentDate(),
					otherPlatform: {
						currentPage: 1,
						pageSize: 10,
						addressCode: "",
						storeName: "",
						totalCount: 134,
						searchKey: '',
						tableData: [],
						searchData: [],
						typeFilter: [],
						addressFilter: [],
						platformFilter: []
					},
					ym:[],
					loading:false
				},
				computed: {
					getSelectedAreaName: function() {
						return((this.addressSelected === "") ? "铜仁地区" : this.addressData[parseInt(this.addressSelected)].geoName)
					}
				},
				mounted: function() {
					this.getAddressData();
					this.getData();
					this.getDataOfTable();
					this.yearMonth();
//					this.endtime = this.endtimes().y + "-" + this.endtimes().m + "-" + this.endtimes().d
//					if(this.endtimes().m - 1 == 0) {
//						this.startime = (this.endtimes().y - 1) + "-" + 12 + "-" + this.endtimes().d;
//					} else {
//						this.startime = this.endtimes().y + "-" + (this.endtimes().m - 1) + "-" + this.endtimes().d;
//					}
//					this.startime="2017-01-01";
				},
				methods: {
					yearSelect:function(years){
						var yms = this.ym.filter(function(element){
							return element.years == years;
						})
						var yo = yms[0] || {};
						return yo.months;
					},
					yearMonth:function(){
							var dates = new Date();
							var year = dates.getFullYear();
							var month = dates.getMonth()+1;
							var childs=[];
							if(year>=2017){
								for(var i = 0;i<=(year-2017);i++){
									if(i+2017<year){
										childs.push({years:2017+i,months:12})
									}else if(i+2017==year){
											childs.push({years:2017+i,months:month})
									}
								}
							}
							this.ym = childs;

					},
					dateChange2: function() {
						this.total222 = 0;
						this.total333 = 0;
						this.tradingVolume = [];
						this.businessVolume2 = [];
						this.getData();
						this.getDataOfTable();
//						if(this.years2 == "" && this.days2 == "") {
//							this.getDataOfTable();
//						} else if(this.days2 != "" && this.years2 != "") {
//							this.getDataOfTable();
//						} else {
//							this.$message({
//								showClose: true,
//								message: "请補全年月！",
//								type: 'warning'
//							});
//						}
					},
					getData: function() {
						var vm = this;
						vm.shopData = [];
						$.ajax({
							type: "get",
							url: "ebb/front/ebb/store/data/" +
								"?startTime=" + vm.years2+"-"+vm.days2+
								"&addressCode=" + ((this.addressSelected === "") ? "" : this.addressData[parseInt(this.addressSelected)].id),
							//url: "mock/shop.json",
							async: true,
							success: function(data) {
								vm.otherPlatform.tableData = data;
								vm.shopData = data;
								vm.makeAxisData();
								vm.shopDataReverse();
							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }
						});
					},
					getDataOfTable:function () {
						var vm = this;
						vm.loading = true;
						$.ajax({
							type: "get",
							url: "ebb/ebb/exceptSit/?start=" + vm.otherPlatform.currentPage + "&size=" + vm.otherPlatform.pageSize + "&startTime=" +vm.years2+"-"+vm.days2+ "&addressCode=" + ((this.addressSelected === "") ? "" : this.addressData[parseInt(this.addressSelected)].id),
							async: true,
							dataType: 'json',
							success: function(data) {
								var theData = data.data;
								if(!theData) {return}
								for (var i = 0 ; i < theData.length;i++){
									if(theData[i].businessVolume == null){
										theData[i].businessVolume = 0 ;
									}
									if(theData[i].tradingVolume){
										theData[i].tradingVolume=(Number)(theData[i].tradingVolume).toFixed(2);
									}
								}
								vm.otherPlatform.searchData = theData;
								vm.otherPlatform.totalCount = data.totalCount;
								vm.loading = false;
							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }
						});
					},
					getAddressData: function() {
						var vm = this;
						$.ajax({
							type: "get",
							url: "ebb/geo/?addressCode=520600000000",
							async: true,
							success: function(data) {
								vm.addressData = data;
							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }
						});
					},
					makeAxisData: function() {
						var vm = this;
						vm.shopData.sort(function(a, b) {
							return a.tradingVolume - b.tradingVolume
						});
						vm.labelData = [];
						vm.seriesSum = [];
						vm.seriesIncome = [];
						for(var i = 0; i < vm.shopData.length; i++) {
							vm.labelData.push(vm.shopData[i].storeName);
							vm.seriesSum.push(parseInt(vm.shopData[i].businessVolume));
							// (Number(Price*Num)).toFixed(2)=34.50
							var tradeVolumn;
							if(vm.shopData[i].tradingVolume){
							 tradeVolumn=(Number)(vm.shopData[i].tradingVolume).toFixed(2);
							}
							vm.seriesIncome.push(tradeVolumn);
						}
						vm.makeChart();
					},
					shopDataReverse: function() {
						this.reverseData = this.shopData;
						this.reverseData.sort(function(a, b) {
							return b.tradingVolume - a.tradingVolume
						});
						return this.reverseData;
					},
					makeChart: function() {
						var vm = this;
						var chart1 = echarts.init(document.getElementById('chart1'));
						var option = {
							noDataLoadingOption: {
								text: ((this.addressSelected === "") ? "铜仁地区" : this.addressData[parseInt(this.addressSelected)].geoName) + ' 暂无数据',
								effect: 'bubble',
								effectOption: {
									effect: {
										n: 5
									}
								},
								textStyle: {
									fontSize: 30
								}
							},
							tooltip: {
								trigger: 'axis'
							},
							color: ['#0765F0', '#2196f3'],
							legend: {
								data: ['销售金额（元）', '销售数量（件）']
							},
							yAxis: [{
								type: 'category',
								data: this.labelData,
								splitLine: {
									show: true,
									lineStyle: {
										color: '#eeeeee',
										type: 'solid',
										width: 1
									}
								}
							}],
							xAxis: [{
								type: 'value',
								name: "销售金额（元）",
								position: 'top',
								axisLabel: { formatter: '￥{value}' },
								splitArea: {
									show: true,
									areaStyle: {
										color: ['rgba(205,92,92,0.05)', 'rgba(255,215,0,0.05)']
									}
								}
							}, {
								type: 'value',
								name: "销售数量（件）",
								position: 'bottom',
								axisLabel: { formatter: '{value}件' },
							}],
							grid: {
								x: 200,
								x2: 200
							},
							series: [{
								name: '销售金额（元）',
								type: 'bar',
								data: this.seriesIncome,
								itemStyle: {
									normal: {
										label: {
											show: true,
											position: "right",
											textStyle: {
												color: "#FCA713",
												fontSize: 14,
												fontWeight: "bold"
											}
										},
										color: function(value) {
											return gradientColor({
												startColor: "#FCA713",
												endColor: "#800080",
												step: (!vm.seriesIncome) ? 0 : vm.seriesIncome.length,
												index: value.dataIndex
											});
										}
									}
								}
							}, {
								name: '销售数量（件）',
								type: 'line',
								data: this.seriesSum,
								xAxisIndex: 1
							}]
						};
						chart1.setOption(option);
					},
					endtimes: function() {
						var mydate = new Date();
						var year = mydate.getFullYear();
						var month = mydate.getMonth() + 1;
						var day = mydate.getDate();
						var dates = { y: year, m: month, d: day };
						return dates
					},
					timeChange: function(num) {
						this.shopData = [];
						this.labelData = [];
						this.seriesSum = [];
						this.seriesIncome = [];
						this.reverseData = [];
						if(num == 1) {
							this.time = '1';
							if(this.endtimes().m <10 && this.endtimes().d < 10){
								this.endtime = this.endtimes().y + "-0" + this.endtimes().m + "-0" + this.endtimes().d;
							}else if(this.endtimes().m <10 && !this.endtimes().d < 10){
								this.endtime = this.endtimes().y + "-0" + this.endtimes().m + "-" + this.endtimes().d;
							}else if(!this.endtimes().m <10 && this.endtimes().d < 10){
								this.endtime = this.endtimes().y + "-" + this.endtimes().m + "-0" + this.endtimes().d;
							}else {
								this.endtime = this.endtimes().y + "-" + this.endtimes().m + "-" + this.endtimes().d;
							}

							if(this.endtimes().m - 1 == 0) {
								if(this.endtimes().d < 10){
									this.startime = (this.endtimes().y - 1) + "-" + 12 + "-0" + this.endtimes().d;
								}else {
									this.startime = (this.endtimes().y - 1) + "-" + 12 + "-" + this.endtimes().d;
								}
							} else {
								if((this.endtimes().m - 1) < 10 && this.endtimes().d < 10){
									this.startime = this.endtimes().y + "-0" + (this.endtimes().m - 1) + "-0" + this.endtimes().d;
								}else if((this.endtimes().m - 1) < 10 && !this.endtimes().d < 10){
									this.startime = this.endtimes().y + "-0" + (this.endtimes().m - 1) + "-" + this.endtimes().d;
								}else if(!(this.endtimes().m - 1) < 10 && this.endtimes().d < 10){
									this.startime = this.endtimes().y + "-" + (this.endtimes().m - 1) + "-0" + this.endtimes().d;
								}else {
									this.startime = this.endtimes().y + "-" + (this.endtimes().m - 1) + "-" + this.endtimes().d;
								}
							}

						} else if(num == 2) {
							this.time = '2';
							if(this.endtimes().m <10  && this.endtimes().d < 10){
								this.endtime = this.endtimes().y + "-0" + this.endtimes().m + "-0" + this.endtimes().d;
							}else if(this.endtimes().m <10  && !this.endtimes().d < 10){
								this.endtime = this.endtimes().y + "-0" + this.endtimes().m + "-" + this.endtimes().d;
							}else if(!this.endtimes().m <10  && this.endtimes().d < 10){
								this.endtime = this.endtimes().y + "-" + this.endtimes().m + "-0" + this.endtimes().d;
							} else {
								this.endtime = this.endtimes().y + "-" + this.endtimes().m + "-" + this.endtimes().d;
							}

							if(this.endtimes().m - 6 < 0) {
								if((this.endtimes().m + 6) < 10 && this.endtimes().d < 10){
									this.startime = (this.endtimes().y - 1) + "-0" + (this.endtimes().m + 6) + "-0" + this.endtimes().d;
								}else if((this.endtimes().m + 6) < 10 && !this.endtimes().d < 10){
									this.startime = (this.endtimes().y - 1) + "-0" + (this.endtimes().m + 6) + "-" + this.endtimes().d;
								}else if(!(this.endtimes().m + 6) < 10 && this.endtimes().d < 10){
									this.startime = (this.endtimes().y - 1) + "-" + (this.endtimes().m + 6) + "-0" + this.endtimes().d;
								}else {
									this.startime = (this.endtimes().y - 1) + "-" + (this.endtimes().m + 6) + "-" + this.endtimes().d;
								}
							} else if(this.endtimes().m - 6 == 0) {
								if(this.endtimes().d < 10){
									this.startime = (this.endtimes().y - 1) + "-" + 12 + "-0" + this.endtimes().d;
								}else {
									this.startime = (this.endtimes().y - 1) + "-" + 12 + "-" + this.endtimes().d;
								}
							}
						} else if(num == 3) {
							this.time = '3';
							if(this.endtimes().m < 10 && this.endtimes().d < 10){
								this.startime = (this.endtimes().y - 1) + "-0" + this.endtimes().m + "-0" + this.endtimes().d;
								this.endtime = this.endtimes().y + "-0" + this.endtimes().m + "-0" + this.endtimes().d;
							}else if(this.endtimes().m < 10 && !this.endtimes().d < 10){
								this.startime = (this.endtimes().y - 1) + "-0" + this.endtimes().m + "-" + this.endtimes().d;
								this.endtime = this.endtimes().y + "-0" + this.endtimes().m + "-" + this.endtimes().d;
							}else if(!this.endtimes().m < 10 && this.endtimes().d < 10){
								this.startime = (this.endtimes().y - 1) + "-" + this.endtimes().m + "-0" + this.endtimes().d;
								this.endtime = this.endtimes().y + "-" + this.endtimes().m + "-0" + this.endtimes().d;
							}else {
								this.startime = (this.endtimes().y - 1) + "-" + this.endtimes().m + "-" + this.endtimes().d;
								this.endtime = this.endtimes().y + "-" + this.endtimes().m + "-" + this.endtimes().d;
							}
						}
						console.log(this.startime + ',' + this.endtime);
						this.getData();
						this.getDataOfTable();
					},
					getAllData:function () {
						this.getData();
						this.getDataOfTable();
					},
					filterType: function(value, row) {
						return row.storeCategory === value;
					},
					handleCurrentChange: function(val) {
						//翻页后跳转至页面顶部
						//$('html, body').animate({ scrollTop: 0 }, 500);
						this.otherPlatform.currentPage = val;
						this.getDataOfTable();
					}
				}
			});

function  getCurrentDate(){
    var date = new Date();
    var year = date.getFullYear();//年
    var mouth  = date.getMonth()+1;
    var day = date.getDate();
    //判断如果是1-9日期则加上0
    if(mouth>=1 && mouth<=9){
        mouth="0"+mouth;
    }
    if(day>=1 && day<=9){
        day="0"+day;
    }
    var platformDate = year+"-"+mouth+"-"+day;

    var platformDate = year+"-"+mouth;

    return platformDate;
}
		</script>
	</body>

</html>